<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>彩虹</title>
<style>
    * {
        box-sizing: border-box;
    }

    body{
    }

    .rainbow {
        height: 200px;
        overflow: hidden;
    }

    .rainbow div {
        overflow: hidden;
    }

    .rainbow > div {
        width: 400px;
        height: 400px;
        background-color: hsl(0, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div {
        height: 380px;
        margin: 10px;
        background-color: hsl(30, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div > div {
        height: 360px;
        margin: 10px;
        background-color: hsl(60, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div > div > div {
        height: 340px;
        margin: 10px;
        background-color: hsl(120, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div > div > div > div {
        height: 320px;
        margin: 10px;
        background-color: hsl(180, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div > div > div > div > div {
        height: 300px;
        margin: 10px;
        background-color: hsl(240, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div > div > div > div > div > div {
        height: 280px;
        margin: 10px;
        background-color: hsl(300, 80%, 50%);
        border-radius: 50%;
    }

    .rainbow > div > div > div > div > div > div > div > div {
        height: 260px;
        margin: 10px;
        background-color: hsl(300, 80%, 100%);
        border-radius: 50%;
    }

</style>
</head>
<body>
<div class="rainbow">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>